<template>
  <div class="bg">
    <!-- 主要包裹组件 -->
    <q-layout>

      <!-- 可选 -->
      <q-layout-header>
        <!-- 任何内容 -->
      </q-layout-header>
      <!-- 必需的 -->
      <q-page-container>

        <!--
          这里是Vue Router注入
          子页面组件的地方

          下面的<router-view />标签可以替换成一个
          实际的网页内容，你应该这样做。
        -->
        <!--
          QPageContainer的第一个子无素必须是QPage，
          所以请确保您的布局路由子组件
          封装一个QPage。
        -->

        <q-page padding>
          <div style="text-align: center">
            <img width="100px" height="100px" v-if="appType === 'eam'" src="../assets/eam.png">
            <img width="100px" height="100px" v-else-if="appType === 'wms'" src="../assets/wms.png">
            <img width="100px" height="100px" v-else src="../assets/mes.png">
          </div>
          <q-field
            icon="person"
            :error="false"
          >
            <q-input ref="userCode" dark color="primary" float-label="用户名" v-model="userCode"
                     @keyup.enter="$refs['password'].focus()" clearable/>
          </q-field>
          <q-field
            icon="lock"
            :error="false"
          >
            <q-input ref="password" dark color="primary" float-label="密码" v-model="password" type="password"
                     @keyup.enter="submit"
                     clearable/>
          </q-field>
          <br>
          <div style="text-align: right;color:#A7A7A7">
            <q-checkbox v-model="remember" color="primary" dark label="下次自动登录"/>
          </div>
          <br>
          <q-btn label="登录" color="primary" dark class="full-width" @click="submit"/>
        </q-page>
      </q-page-container>
      <!-- 可选  -->
      <q-layout-footer>
        <!-- 任何内容 -->
      </q-layout-footer>
    </q-layout>

  </div>
</template>

<script>

  import MT from '../js/mutation-types'
  import { mapState } from 'vuex'

  export default {
    components: {},
    name: 'login',
    computed: {
      ...mapState({
        appType: state => state.appType,
      })
    },
    data: () => ({
      valid: false,
      userCode: '',
      nameRules: [
        v => !!v || 'Name is required',
        v => v.length <= 10 || 'Name must be less than 10 characters'
      ],
      password: '',
      passwordRules: [
        v => !!v || 'E-mail is required',
        v => v.length <= 10 || 'E-mail must be valid'
      ],
      remember: false
    }),
    methods: {
      submit () {
        // if (this.$refs.form.validate()) {
        // Native form submission is not yet supported
        if (this.userCode === '') {
          this.$parent.warn('请输入用户名')
          this.$refs['userCode'].focus()
          return
        }
        if (this.password === '') {
          this.$parent.warn('请输入密码')
          this.$refs['password'].focus()
          return
        }
        this.axios.post(this.$conf.server + '/loginAction/login.html', this.$qs.stringify({
          userCode: this.userCode,
          password: this.password
        })).then(res => {
            let data = res.data
            if (data.result && data.msg === 'ok') {
              this.$store.commit(MT.SET_TOKEN, this.userCode)
              this.$store.commit(MT.SET_USER_CODE, this.userCode)
              if (this.remember) {
                this.rememberMe()
              }
              if (this.$route.params && this.$route.params.redirect) {
                this.$router.replace({ name: this.$route.params.redirect, query: this.$route.query })
              } else {
                this.$router.replace('index')
              }
            } else {
              this.$parent.error('登录失败')
            }
          }
        ).catch(e => {
          this.$parent.error('登录失败' + e)
          // this.$root.$router.push("main")
        })
        // }
      },
      rememberMe () {
        // 优先存储在localStorage上
        let localStorage = window.localStorage
        if (localStorage) {
          localStorage.setItem('userCode', this.userCode)
          localStorage.setItem('password', this.password)
          return
        }
        try {
          window.pda.rememberMe(JSON.stringify({
            userCode: this.userCode,
            password: this.password
          }))
        } catch (e) {
        }
      },
      getRemember () {
        // 先尝试读取设备上存储
        try {
          let getRemember = window.pda.getRemember()
          if (getRemember && getRemember !== '') {
            let parse = JSON.parse(getRemember)
            this.autoSubmit(parse.userCode, parse.password)
            return
          }
        } catch (e) {
        }
        // 再尝试读取localStorage
        let localStorage = window.localStorage
        if (localStorage) {
          let userCode = localStorage.getItem('userCode')
          let password = localStorage.getItem('password')

          if (userCode !== null && password != null) {
            this.autoSubmit(userCode, password)
          }
        }
      },
      autoSubmit (userCode, password) {
        this.userCode = userCode
        this.password = password
        this.submit()
      }
    },
    created () {
      this.getRemember()
    }
  }
</script>

<style scoped>
  .bg {
    background: url("../assets/background.jpg") repeat center;
  }
</style>
